{% extends 'cms/cms_base.html' %}
{% from 'common/_macro.html' import static %}
{% block title %}
轮播图管理
{% endblock %}
{% block head %}
    <script src="{{ static('cms/js/banners.js') }}"></script>
    <style>
    .top-box button{
        float: right;
    }
    </style>

{% endblock %}

{% block page_title %}
{{ self.title() }}
{% endblock %}
{% block page_content %}
    <div class="top-box">
        <button class="btn btn-warning " data-toggle="modal" data-target="#banner-dialog">添加轮播图</button>
    </div>
    <table class="table table-bordered">
        <thead>
        <tr>
            <th>名称</th>
            <th>图片链接</th>
            <th>跳转链接</th>
            <th>创建时间</th>
            <th>优先级</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        {% for banner in banners %}
            <tr data-name="{{ banner.name }}" data-image="{{ banner.image_url }}" data-link="{{ banner.link_url }}"
            data-priority="{{ banner.priority }}"data-id="{{ banner.id }}">
                <td>{{ banner.name }}</td>
                <td><a href="{{ banner.image_url }}" target="_blank">{{ banner.image_url }}</a></td>
                <td><a href="{{ banner.link_url }}" target="_blank">{{ banner.link_url }}</a></td>
                <td>{{ banner.create_time }}</td>
                <td>{{ banner.priority }}</td>
                <td>
                    <button class="btn btn-default btn-xs edit-banner-btn">编辑</button>
                    <button class="btn btn-danger btn-xs del-banner-btn ">删除</button>
                </td>
            </tr>
        {% endfor %}
    </tbody>
    </table>
<!-- Modal -->
<div class="modal fade" id="banner-dialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">轮播图</h4>
      </div>
      <div class="modal-body">
          <form class="form-horizontal">
            <div class="form-group">
                <label  class="col-lg-2 control-label">名称</label>
                <div class="col-lg-10">
                    <input type="text" name="name" class="form-control" placeholder="轮播图名称">
                </div>
            </div>
              <div class="form-group">
                <label  class="col-lg-2 control-label">图片</label>
                <div class="col-lg-7">
                    <input type="text" name="image_url" class="form-control" placeholder="轮播图链接">
                </div>
                  <button class="btn btn-primary col-lg-2">添加图片</button>
            </div>
              <div class="form-group">
                <label  class="col-lg-2 control-label">跳转</label>
                <div class="col-lg-10">
                    <input type="text" name="link_url" class="form-control" placeholder="跳转链接">
                </div>
            </div>
              <div class="form-group">
                <label  class="col-lg-2 control-label">权重</label>
                <div class="col-lg-10">
                    <input type="number" name="priority" class="form-control" placeholder="优先级">
                </div>
            </div>
          </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary " id="save-banner-btn">保存</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}